<template>
  <div class="hello">
    
    <h1 class="page-title">Action Sheet</h1>
    <div class="page-actionsheet-wrapper">
	      <button class="mint-button mint-button--default mint-button--large" @click="actionSheet">
	        <label class="mint-button-text">点击上拉 action sheet</label>
	      </button>
	     
	</div>
     <mt-actionsheet
        :actions= "data"
        v-model="sheetVisible">
    </mt-actionsheet>

	<div>
		<InputCamera></InputCamera>
	</div>
	<div>
		<InputVideo></InputVideo>
	</div>
	<div>
		<CellSwipe></CellSwipe>
	</div>
	<div>
		<Cell></Cell>
	</div>
	<div>
		<Search></Search>
	</div>
	<div>
		<Header></Header>
	</div>
	<div>
		<TabContainer></TabContainer>
	</div>
	<div>
		<NavBar></NavBar>
	</div>
	<div>
		<TabBar></TabBar>
	</div>
	<div>
		<CheckList></CheckList>
	</div>
	<div>
		<CheckList2></CheckList2>
	</div>
	<div>
		<Radio></Radio>
	</div>
	<div>
		<Swit></Swit>
	</div>
	<div>
		<PickerSingle></PickerSingle>
	</div>
	<div>
		<Pick2></Pick2>
	</div>
	<div>
		<Pick3></Pick3>
	</div>
	<div>
		<Pick4></Pick4>
	</div>
	<div>
		<Pick5></Pick5>
	</div>
  </div>
</template>
 
 
<script>
import InputCamera from "./InputCamera.vue"
import InputVideo from "./InputVideo.vue"
import CellSwipe from './CellSwipe.vue'
import Cell from "./Cell.vue"
import Search from "./Search.vue"
import Header from "./Header.vue"
import TabContainer from "./TabContainer.vue"
import NavBar from "./NavBar.vue"
import TabBar from './TabBar.vue'
import CheckList from "./CheckList.vue"
import CheckList2 from "./CheckList2.vue"
import Radio from "./Radio.vue"
import Swit from "./Swit.vue"
import PickerSingle from "./PickerSingle.vue"
import Pick2 from "./Picker2.vue"
import Pick3 from './Picker3.vue'
import Pick4 from "./Picker4.vue"
import Pick5 from "./Picker5.vue"
export default {
  name: 'hello',
  components:{
  	InputCamera,
  	InputVideo,
  	CellSwipe,
  	Cell,
  	Search,
  	Header,
  	TabContainer,
  	NavBar,
  	TabBar,
  	CheckList,
  	CheckList2,
  	Radio,
  	Swit,
  	PickerSingle,
  	Pick2,
  	Pick3,
  	Pick4,
  	Pick5
  },
  data () {
    return {
      // action sheet 选项内容
      data: [{
        name: '拍照',
        method : this.getCamera	// 调用methods中的函数
      }, {
        name: '从相册中选择', 
        method : this.getLibrary	// 调用methods中的函数
      }],
      // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏
      sheetVisible: false
    }
  },
  methods: {
    actionSheet: function(){
    	// 打开action sheet
      this.sheetVisible = true;
    },
    getCamera: function(){
      console.log("打开照相机")
    },
    getLibrary: function(){
      console.log("打开相册")
    }
  }
}
</script>
 
 
<style scoped>
div{
	margin-bottom: 10px;
}
</style>